<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年08月23日 19:38
 * @Copyright:  2022-2023
!-->
<template>
  <div>
    <el-card class="site-connect-container" shadow="always">
      <div class="site-connect-item item-title">
        关注我们
      </div>
      <div class="site-connect-item github">
        <div class="github-title">Github<svg-icon icon-class="github" /></div>
        <div class="github-address">{{siteConfig.github}}</div>
      </div>
      <div class="site-connect-item gitee">
        <div class="gitee-title">Gitee<svg-icon icon-class="gitee" /></div>
        <div class="gitee-address">{{siteConfig.gitee}}</div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import store from "@/store";

@Component({})
export default class index extends Vue {

  /** 系统配置信息 */
  get siteConfig() {
    return store.getters.siteConfig;
  }

}
</script>
<style scoped lang="scss">
.site-connect-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
  .site-connect-item {
    line-height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    text-align: center;
    .github-title {
      background-color: #b5ffee;
      width: 25%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .gitee-title {
      background-color: #ffaeb9;
      width: 25%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .github-address {
      width: 75%;
      background-color: #a7c2fc;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 10px;
      text-align: left;
    }
    .gitee-address {
      width: 75%;
      background-color: #d3caf8;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 10px;
      text-align: left;
    }
  }
  .item-title {
    font-weight: 600;
    font-size: 20px;
    color: #3B3E41;
  }

  .github {
    font-size: 15px;
    font-weight: 600;
  }
  .gitee {
    font-size: 15px;
    font-weight: 600;
  }
}
</style>
